<template>
	<view class="page" :style="{minHeight:windowHeight+'px'}">
		<view class="top" >
			<scroll-view scroll-x="true" scroll-with-animation="true">
				<view class="return">
					<image src="../../../../static/jiaotou1.png" @click="gotoPage('/pages/user/my-car/my-car')"></image>
				</view>
				<view class="head" v-for="(item,index) of nav" @click="tabClick(item)">
					<view class="head-tab">
						<view class="tab" :class="idx===index ? 'active tab' : ''" @click="tabTypeFunc(item.id)">
							{{item.name}}
						</view>
						<view class="image-item" v-show="idx==index">
							<image class="tab tab-iamge" src="../../../../static/tab-iamge.png"></image>
						</view>
					</view>
				</view>
				<view class="line"></view>
			</scroll-view>
		</view>
		<view class="content" >
			<view class="black-box">
				<view class="black">
					<view class="blue"></view>
					<!-- <view class="line3" :style="{paddingBottom:lineHeight+'px'}"></view> -->
				</view>
			</view>
			<view class="content-item">
			
					<view class="content-head">
						<view class="content-time">
							2021年2月11日 周五
						</view>
						<view class="tripTime">即将出行</view>
					</view>
					<view class="bb-box">
						<view class="bb" v-for="(item,index) in 2"  >
							<view class="item">
								<view class="item_time">6月16日 <view class="first">第一天</view>
								</view>
								<view class="item-con">
									<view>出发地</view>
									<view><image class="ju" src="../../../../static/ju.png"></image> </view>
									<view>目的地</view>
								</view>
								<view class="item-con con_time">
									<text>11:00</text>
									<text>16:00</text>
								</view>
							</view>
						</view>
					</view>
					
				</view>
			</view>
			<view class="content" >
				<view class="black-box">
					<view class="black">
						<view class="blue"></view>
						<!-- <view class="line3" :style="{paddingBottom:lineHeight+'px'}"></view> -->
					</view>
				</view>
				<view class="content-item">
				
						<view class="content-head">
							<view class="content-time">
								2021年2月11日 周五
							</view>
							<view class="tripTime">即将出行</view>
						</view>
						<view class="bb-box">
							<view class="bb" v-for="(item,index) in 5"  >
								<view class="item">
									<view class="item_time">6月16日 <view class="first">第一天</view>
									</view>
									<view class="item-con">
										<view>出发地</view>
										<view><image class="ju" src="../../../../static/ju.png"></image> </view>
										<view>目的地</view>
									</view>
									<view class="item-con con_time">
										<text>11:00</text>
										<text>16:00</text>
									</view>
								</view>
							</view>
						</view>
						
					</view>
				</view>
		</view>
		<!-- 没有记录 -->
		<!-- <view class="null d-c-c p30" v-if="listData.length == 0">				
			<text class="cont">亲，暂无相关记录哦</text>
		</view> -->
			<!-- <uni-load-more v-else :loadingType="loadingType"></uni-load-more> -->

	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more.vue';
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				loadding: false,
				listData: 0,
				nav: [{
						name: '行程安排',
						id: 0
					},
					{
						name: '行程记录',
						id: 1
					},

				],
				idx: 0,
				/*可滚动视图区域高度*/
				windowHeight: 0,
				/*当前选中的类别*/
				type_active: 0,
				lineHeight:'',
			};
		},
		mounted() {
			const query = uni.createSelectorQuery().in(this);
			query.select('.bb-box').boundingClientRect(data => {
				console.log(data)
				this.lineHeight = (data.height)
			}).exec();
		 console.log(this.lineHeight)
		},
		computed: {
			/*加载中状态*/
			loadingType() {
				if (this.loadding) {
					return 1;
				} else {
					if (this.listData.length != 0) {
						return 2;
					} else {
						return 0;
					}
				}
			}
		},
		onShow() {
			//this.init();
		},
		onLoad() {
			this.getDatainfo();
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight =res.windowHeight
				}
			});
		},
		methods: {
			/*跳转页面*/
			gotoPage(path) {
				let self = this;
				if (path.startsWith('/')) {
					uni.navigateTo({
						url: path
					});
				} else {
					self[path]();
				}
			},
			/*tab切换*/
			tabTypeFunc(e) {
				if (e != this.idx) {
					this.idx = e,
						this.listData = [],
						this.getDatainfo();
				}
			},
			/*获取数据*/
			getDatainfo() {
				let self = this;
				uni.showLoading({
					title: '加载中'
				});
				self._get('car.order/my_car_go', {

				},
				function(res) {
					console.log(res);
					self.listData = res.data.list;
					self.loadding = false;
					uni.hideLoading();
				});
			},

			// init() {
			// 	let _this = this;
			// 	uni.getSystemInfo({
			// 		success(res) {
			// 			_this.phoneHeight = res.windowHeight;
			// 			// 计算组件的高度
			// 			let view = uni.createSelectorQuery().select('.top');
			// 			// view.boundingClientRect(data => {
			// 			// 	let h = _this.phoneHeight - data.height;
			// 			// 	_this.scrollviewHigh = h;
			// 			// }).exec();
			// 		}
			// 	});
			// },
			/* 切换导航条 */
			tabClick(item) {
				this.idx = item.id;
			},
		}
	}
</script>

<style lang="scss">
	@import 'journey.scss';	
</style>
